<template>
  <ContentBase>
      <div class="card" v-for="user in users" :key="user.id" @click="open_user_profile(user.id)">
        <div class="card-body">
          <div class="row">
            <div class="col-1 img-field">
              <img class="img-fluid" :src="user.photo" alt="">
            </div>
            <div class="col-11">
              <div class="username">{{ user.username }}</div>
              <div class="follower-count">{{ user.followerCount }}</div>
            </div>
          </div>
        </div>
      </div>
      <nav aria-label="...">
        <ul class="pagination" style="float: right;">
          <li class="page-item" @click="click_page(-2)">
            <a class="page-link" href="#">前一页</a>
          </li>
          <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
            <a class="page-link" href="#">{{ page.number }}</a>
          </li>
          
          <li class="page-item" @click="click_page(-1)">
            <a class="page-link" href="#">后一页</a>
          </li>
        </ul>
      </nav>

  </ContentBase>
</template>

<script>
import ContentBase from '../components/ContentBase'
import $ from 'jquery';
import { ref } from 'vue';
import router from '@/router/index';
import { useStore } from 'vuex';

export default {
  name: 'UserList',
  components: {
      ContentBase,
  },
  setup() {
    const store = useStore();
    let current_page = 1;
    let users = ref([]);
    let total_users = 0;
    let pages = ref([]);

    const click_page = page => {
      if(page === -2) page = current_page - 1;
      else if(page === -1) page = current_page + 1;
      let max_pages = parseInt(Math.ceil(total_users / 5));
      if(page >= 1 && page <= max_pages) {
        pull_page(page);
      }
    };

    const update_pages = () => {
      let max_pages = parseInt(Math.ceil(total_users / 5));
      let new_pages = [];
      for(let i = current_page - 2; i <= current_page + 2; i++) {
        if(i >= 1 && i <= max_pages) {
          new_pages.push({
            number: i,
            is_active: i === current_page ? "active": "",
          });
        }
      }
      pages.value = new_pages;
      // console.log(pages.value);
    }

    const pull_page = page => {
      current_page = page;
      $.ajax({
        url: 'http://127.0.0.1:3005/myspace/userlist/',
        type: "get",
        data: {
          page,
        },
        success(resp) {
          users.value = resp.users;
          total_users = resp.users_count;
          update_pages();
        }
    });
    }

    pull_page(current_page);
    

    const open_user_profile = userId => {
      if (store.state.user.is_login) {
        router.push({
          name: "userprofile",
          params: {
            userId
          }
        })
      } else {
        router.push({
          name: "login"
        });
      }
    }

    return {
      users,
      open_user_profile,
      pull_page,
      pages,
      click_page,
    };
  }
}
</script>

<style scoped>
img {
  border-radius: 50%;
}

.username {
  font-weight: bold;
  height: 50%;
}

.follower-count {
  font-size: 12px;
  color: gray;
  height: 50%;
}

.card {
  margin-bottom: 20px;
  cursor: pointer;
}

.card:hover {
  box-shadow: 2px 2px 10px lightgrey;
  transition: 500ms;
}

.img-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
</style>